<template>
    <el-card v-loading="loadingTask" style="margin: 10px auto; width: 60%;">
      <div v-if="taskGroups.length !== 0">
        <el-tabs v-model="currentGroupIdx">
          <el-tab-pane v-for="(item , idx) in taskGroups" :label="`第${idx + 1}组`" :key="idx" :name="`${idx}`">
          </el-tab-pane>
        </el-tabs>
        <task-map
            v-model="subTasks"
            mode="display"
            :node-state-styles="stateStyles"
            :node-states="unfinishedTasks"
            :tooltip-config="tooltipConfig"
            @click-node="handleClickNode($event)"
        ></task-map>
        <el-card
            :shadow="'never'"
            v-if="currentReportId !== undefined">
          <collaboration-task-report-detail
              :report-id="currentReportId"
          ></collaboration-task-report-detail>
        </el-card>
      </div>
      <div v-else>
        <el-empty></el-empty>
      </div>
    </el-card>
</template>

<script>
import {getCollaborationTaskDetail, getCollaborationTaskGroups} from "@/api/task";
import TaskMap from "@/components/new/task-map/TaskMap";
import CollaborationTaskReportDetail
  from "@/views/new/boss/collaboration-task-report-detail/CllaborationTaskReportDetail";
export default {
  name: "CollaborationTaskReportList",
  components: {CollaborationTaskReportDetail, TaskMap},
  data(){
    return{
      taskGroups: [],
      collaborationTask: {
        subTasks: []
      },
      loadingTask: false,
      currentGroupIdx: '',
      stateStyles: {
        disabled: {
          stroke: '#6c6c6c',
          fill: '#dbdbdb'
        }
      },
      unfinishedTasks: {
        disabled: new Set(),
        selected: new Set()
      },
      currentReportId: undefined
    }
  },
  mounted() {
    this.loadCollaborationTask().then(() => {
      return this.loadTaskGroups();
    })
      .then(() => {
        this.refreshGroup(0)
      })
      .catch(e => {
      this.$message.error(e.message);
    }).finally(() => {
      this.loadingTask = false;
    });

  },
  computed: {
    subTasks(){
      if(this.collaborationTask){
        return this.collaborationTask.subTasks;
      }else{
        return []
      }
    },
    tooltipConfig(){
      return {
        getContent: (task) => {
          if(this.taskGroups.length !== 0){
            const reportViewResult = this.taskGroups[this.currentGroupIdx].filter(report => {
              return report.taskId === task.id;
            });

            if(reportViewResult.length !== 0){
              const result = reportViewResult[0]
              return `<div>${result.workerName}</div>`
            }
          }
          return '...';

        }
      }
    }
  },
  watch: {
    currentGroupIdx(idx){
      this.refreshGroup(idx);

    },

  },
  methods: {
    loadTaskGroups(){
      this.loadingTask = true;
      return getCollaborationTaskGroups(this.$route.params.taskId)
          .then(res => {
            if(res.code === 200){
              this.taskGroups = res.data;
            }else{
              throw new Error(res.msg);
            }
          })
    },
    loadCollaborationTask(){
      this.loadingTask = true;
      return getCollaborationTaskDetail(this.$route.params.taskId)
      .then(res => {
        if(res.code === 200){
          this.collaborationTask = res.data;
        }else{
          throw new Error(res.msg);
        }
      })
    },
    refreshGroup(idx){
      this.currentReportId = undefined;
      if(this.taskGroups.length !== 0 && this.subTasks.length !== 0){
        const exist = new Set(this.taskGroups[idx].map(item => item.taskId));
        this.unfinishedTasks = {selected: new Set(), disabled: new Set(this.subTasks.map(task => task.id).filter(id => !exist.has(id)))};
      }
    },
    handleClickNode(taskId){
      if(this.taskGroups.length !== 0){

        const target = this.taskGroups[this.currentGroupIdx].filter(reportView => {
          return reportView.taskId === taskId;
        });
        if(target.length !== 0){
          this.currentReportId = target[0].reportId;
          this.unfinishedTasks = {...this.unfinishedTasks, selected: new Set([target[0].taskId])}
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
